<template>
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr><th style="width: 118px">{{$t('coupon.coupon.table1')}}</th><th style="width: 370px">{{$t('coupon.coupon.table2')}}</th><th>{{$t('coupon.coupon.table3')}}</th><th v-if="act != 'expired'">{{$t('coupon.coupon.table4')}}</th></tr>
            </thead>
        </table>
        <table cellpadding="0" cellspacing="0" style="marginTop:10px;">
            <tbody>   
            <tr v-for="item in couponList" :key="item.id">
                <td><p class="day">{{item.expiredTime | formatDate}}</p><p class="time">{{item.expiredTime | formatTime}}</p><i class="status-icon close-clock"></i></td>
                <td class="ks-main">
                    <coupon-item :coupon="item" :alllSelectable="false"></coupon-item>
                </td>
                <td class="ks-status">
                    {{statusShowArr[item.status]}}
                </td>
                <td class="ks-operate">
                    <router-link :to="{name: 'couponAdapt', params: {id: item.id}}" v-if="item.status == 0" class="aip-green-btn">{{$t('product.detail.shop_now')}}</router-link>
                    <div v-else style="width:88px"></div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-size="listQuery.size" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>

</template>

<script>
    import { getCouponList } from '@/api/c'
    import couponItem from './couponItem.vue';
    const statusArr = {
        active: [0, 1, 4],
        completed: [2],
        expired: [3]
    }
    const statusShowArr = ['wait for sending', 'unused', 'completed', 'expired', 'have chosen the coupon']
    /*
WAIT_SENDING:0: "待发送":？,
    VALID:1: "有效":"unused", // 发送成功后改为有效
    USED:2: "已使用":"completed", // 订单审核通过即为此状态
    EXPIRED:3: "过期":"expired",
    BIND:4,:"已绑定":"order generated";
    */
    export default {
        props: {
            act: {
                type: String,
                default: 'active'
            }
        },
        components: { couponItem },
        data() {
        return {
            statusShowArr: statusShowArr,
            total: null,
            listQuery: {
                page: 1,
                size: 5
              },
            couponList: [],  
            loading: false
        }
    },
    created() {
        this.getList()
    },
    watch: {
        act: function (val) {
            this.getList(val)
        }
    },
    methods: {
        getList(status) {
          var param = Object.assign({}, this.listQuery);
          //分发各状态
          let temp = this.act;
          if (status) {
            temp = status
          }
          param.status = statusArr[temp];
          getCouponList(param).then(response => {
              this.couponList = response.data ? response.data.list : []
              this.total = response.data ? response.data.total : 0
          })
        },
        handleSizeChange(val) {
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.getList()
        }
    }
    }
</script>
<style scoped>
    p {
        margin: 0;
    }
    .coupon-list table {
        margin-top: 20px;
        width: 100%;
    }
    .coupon-list th {
        background: #EBEDF8;
        height: 28px;
        font-size: 11px;
        color: #333333;
        font-weight: normal;
    }
    td {
        height: 105px;
        text-align: center;
    }
    td .day {
        font-size: 14px;
        color: #333333;
    }
    td .time {
        font-size: 10px;
        color: #72808E;
    }
    tr td:nth-of-type(1) {
        position: relative;
        border-right: 1px solid #EBEDF8;
        width: 105px;
        padding-right: 24px;
        text-align: right;
    }
    tr td:nth-of-type(2) {
        width: 405px;
        padding-left: 35px;
    }
    .ks-main {
        height: 105px;
    }
    .ks-main .coupon-item {
        border-bottom: 1px solid #EBEDF8;
        padding: 24px 0;
        text-align: left;
        margin-bottom: 0;
    }
    td .status-icon {
        position: absolute;
        top: 40px;
        right: -15px;
        padding: 8px;
        width: 30px;
        height: 30px;
    }
    td .clock {
        background: url("../../../../assets/icons/clock.png") no-repeat center #ffffff;
        background-size: 55%;
    }
    td .close-clock {
        background: url("../../../../assets/icons/clock2.png") no-repeat center #ffffff;
        background-size: 55%;
    }
    td .complete {
        background: url("../../../../assets/icons/complete.png") no-repeat center #ffffff;
        background-size: 55%;
    }
    .ks-status {
        font-size: 13px;
        color: #72808E;
    }
    .ks-operate, .ks-status {
        border-bottom: 1px solid #EBEDF8;
    }
    .complete-status td:nth-of-type(1) {
        font-size: 14px;
        color: #72808E;
    }
    .complete-status td:nth-of-type(2) p:nth-of-type(2) {
        color: #72808E;
    }
</style>
<style type="text/css">
    .pagination-container {
        margin-top: 50px;
    }

</style>

